<template>
  <div>
    <div class="home">
        <div class="left">
          <div class="d1">
            <p>千千衣莎<small class="el-icon-chat-dot-round"></small></p>
            <p><span>收藏店铺</span><span>进入店铺</span></p>
            <p><span></span><span>店内搜索</span></p>
          </div>
          <div class="d2">
            <h4>本店分类</h4>
            <p class="el-icon-caret-right">全部商品</p>
          </div>
          <div class="d3">
            <h4>看了又看</h4>
            <ul>
              <li v-for="aa in show">
                <img :src="aa.tu_url" alt="">
                <p>{{aa.name}}</p>
                <span class="span1">￥{{aa.price}}</span>
                <span class="span2">♡{{aa.unprice}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="right">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="商品详情" name="first">
              <div class="content"  @scroll="rightScroll">
                <ul>
                  <li class="d1">
                    <h4>商品描述</h4>
                    <p>这是我这期zui爱的T恤！两色必入</p>
                    <p>精心设计的小刺绣图案传达趣味生活</p>
                    <p>oversize的版型，非常好穿</p>
                    <p>整体采用今年流行亮色系：七彩橘 七彩绿</p>
                    <p>适合情侣、闺蜜、兄弟穿搭！百搭指数100+</p>
                    <p>必入款！</p>
                  </li>
                  <li class="d2">
                    <h4>产品参数</h4>
                    <table>
                      <tr>
                        <td>图案: 条纹</td>
                        <td>颜色: 橘色,绿色</td>
                        <td>袖型: 常规袖</td>
                      </tr>
                      <tr>
                        <td>尺码: XL,L,M,XXL</td>
                        <td>衣长: 常规款（51-65cm）</td>
                        <td>版型: 宽松</td>
                      </tr>
                      <tr>
                        <td>季节: 夏季</td>
                        <td>材质: 其他色</td>
                        <td>领型: 圆领</td>
                      </tr>
                      <tr>
                        <td>袖长: 短袖</td>
                        <td>风格: 原宿</td>
                        <td> 	潮流: 韩系</td>
                      </tr>
                    </table>
                  </li>


                <li class="d3">
                  <h4>穿着效果</h4>
                 <section v-for="zz in tu">
                   <img :src="zz" alt="">
                 </section>
                  <img src="../assets/bj5.jpg" alt="">
                </li>
                <li class="d4">
                  <h4>尺码说明</h4>
                  <table>
                    <tr>
                      <td>尺码</td>
                      <td>胸围</td>
                      <td>袖长</td>
                      <td>肩宽</td>
                      <td>衣长</td>
                    </tr>
                    <tr>
                      <td>M</td>
                      <td>98</td>
                      <td>20</td>
                      <td>50</td>
                      <td>67</td>
                    </tr>
                    <tr>
                      <td>L</td>
                      <td>102</td>
                      <td>21</td>
                      <td>51</td>
                      <td>68</td>
                    </tr>
                    <tr>
                      <td>XL</td>
                      <td>108</td>
                      <td>22</td>
                      <td>52</td>
                      <td>69</td>
                    </tr>
                    <tr>
                      <td>XXL</td>
                      <td>112</td>
                      <td>23</td>
                      <td>53</td>
                      <td>70</td>
                    </tr>
                  </table>
                  <p>※ 以上尺寸为实物人工测量，因测量方式不同会有1-2cm误差，相关数据仅作参考，以收到实物为准。</p>
                </li>
                <li class="d5">
                  <h4>本店同类商品</h4>
                  <ul>
                    <li v-for="aa in show">
                      <img :src="aa.tu_url" alt="">
                      <p>{{aa.name}}</p>
                      <span class="span3">￥{{aa.price}}</span>
                      <span class="span4">♡{{aa.unprice}}</span>
                    </li>
                  </ul>
                </li>
                </ul>
              </div>
              <div class="r1" id="fixPara">
                <ul>
                  <li v-for="(list,index) in xq" :class="{active: index === selectIndex }" >
                    <a href="" @click.prevent="setIndex(index)">{{list.bti}}</a>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="累计评价" name="second">累计评价</el-tab-pane>
            <el-tab-pane label="本店同类商品" name="third">本店同类商品</el-tab-pane>
          </el-tabs>
        </div>
    </div>
  </div>
</template>

<script>
  import mix from '../mix'
  import xq from '../xq'
    export default {
        data: function () {
            return {
              show:mix.data,
              xq:xq.data,
              activeName: 'first',
              tu:[
                'https://s11.mogucdn.com/mlcdn/55cf19/190605_29321c03la337cbjfc828j372lig0_750x750.jpg_750x999.jpg',
                'https://s3.mogucdn.com/mlcdn/55cf19/190605_7b8k7888c4b11hae11f81i9l2gl76_750x750.jpg_750x999.jpg',
                'https://s3.mogucdn.com/mlcdn/55cf19/190605_1cha48ef2024e7debhd2059990l48_750x750.jpg_750x999.jpg',
                'https://s3.mogucdn.com/mlcdn/55cf19/190605_31ikfife59185g8c391b8hkbe7lfi_750x750.jpg_750x999.jpg',
                'https://s11.mogucdn.com/mlcdn/55cf19/190605_551k474edb099ck5lgcia5f26318g_750x750.jpg_750x999.jpg',
                'https://s3.mogucdn.com/mlcdn/55cf19/190605_17fj0586gh42j8b32aedgacg01jhc_750x750.jpg_750x999.jpg',
                'https://s11.mogucdn.com/mlcdn/55cf19/190605_20ld7c2516h4bef8gei1h6hg6feha_750x750.jpg_750x999.jpg',
                'https://s11.mogucdn.com/mlcdn/55cf19/190605_026g11l4eb68j67e3e5lbli741c2i_750x750.jpg_750x999.jpg'

              ],
              selectIndex:0,
              // 存储选项的滚动范围
              offsetTable:[]
            }
        },
      methods:{
        setIndex:function(ins){
//        this.selectIndex = ins;
//              $('aside ul li').eq(ins).addClass('active').siblings().removeClass('active');

          // offsetTop:当前标签相对于浏览器窗口的偏移量
          // scrollTop:当前标签的滚动偏移量 = 当前显示选项之上的选项高度之和
          // li标签高度：next标签offset - self标签offset

          let offsetTop = Math.floor( $('.content').offset().top );
          let lis = $('.content ul li');
          let liTop = lis[ins].offsetTop;
          console.log( liTop );
          console.log( offsetTop )

          console.log( liTop - offsetTop )

          $('.content').animate({
            scrollTop:liTop - offsetTop
          }, 100, () =>{
            this.selectIndex = ins
          }  );


        },
        rightScroll:function(ev){
//         console.log( $('.content').scrollTop() );

          // 得到选项的滚动高度
          for( var i = this.offsetTable.length- 1 ; i >= 0; i-- ){
            if( $('.content').scrollTop() >= this.offsetTable[i]  ){
              this.selectIndex = i;
              break;
            }
          }
        },
        handleClick(tab, event) {
          console.log(tab, event);
        }
      },
      mounted:function(){
        this.offsetTable = [];

        let lis = $('#content ul li');
        let offsetTop = Math.floor( $('.content').offset().top );
        for( var i = 0; i < lis.length; i++ ){
          this.offsetTable.push( Math.floor(lis[i].offsetTop) - offsetTop );
        }

//            console.log( this.offsetTable );
        // [0,1的高度，1和2的高度，1和2和3的高度,....]
        // [0, 150, 6900, 8000, 10000, 120000]

        var oDiv = document.getElementById("fixPara"),
          H = 0,
          Y = oDiv
        while (Y) {
          H += Y.offsetTop;
          Y = Y.offsetParent;
        }
        window.onscroll = function()
        {
          var s = document.body.scrollTop || document.documentElement.scrollTop
          if(s>H) {
            oDiv.style = "position:fixed;top:0;width:15%;right:17.5%;  overflow: scroll;"
          } else {
            oDiv.style = ""
          }
        }

      }
    }
</script>

<style scoped>

  .home{
    width: 65%;
    margin: 0 auto;
    overflow: hidden;
  }
  .left{
    width: 18%;
    /*background: darkgray;*/
    float: left;
  }
  .left .d1{

  }
  .left .d1 p{
    border: solid 1px #ccc;
    height: 50px;
    padding-top: 15px;
  }
  .left .d1 p:first-child{
    font-size: 14px;
    color: #000;
    font-weight: 600;
    border-bottom: none;
  }
  .left .d1 p:first-child small{
    font-size: 16px;
  }
  .left .d1 p:nth-child(2){
    border-bottom: none;
  }
  .left .d1 p:nth-child(2) span{

    font-size: 14px;
    color: #000;
    border: solid 1px #ccc;
    padding: 3px;
    margin: 0 15px;
  }
  .left .d1 p:last-child{

  }
  .left .d1 p:last-child span:first-child{
    border: solid 1px #ccc;
    display: inline-block;
    width: 90px;
    height: 20px;
  }
  .left .d1 p:last-child span:last-child{
    font-size: 14px;
    color: #fff;
    background: #000;
   padding:3px 8px;
    position: relative;
    bottom:3.5px;
  }
  .left .d2{
    margin-top:20px;
    /*background: red;*/
  }
  .left .d2 h4{
    border: solid 1px #ccc;
    padding: 8px 0;
    border-bottom: none;
  }
  .left .d2 p{
    width: 100%;
    /*padding: 20px 0;*/
    padding-top: 20px;
    padding-bottom: 20px;
    /*left:-40px;*/
    /*position: relative;*/
    color: #666666;
    font-size: 13px;
    padding-right: 80px;
    border: solid 1px #ccc;
  }
  .left .d3{
    width: 100%;
    border: solid 1px #ccc;
    margin-top: 20px;

  }
  .left .d3 img{
    width: 90%;

  }
  .left .d3 h4{
    background: #f6f6f6;
    padding: 8px 0;
    border-bottom: solid 1px #ccc;
  }
  .left .d3 ul{
    margin-top: 20px;
  }
  .left .d3 p{
    text-align: left;
    font-size: 14px;
    color: #000;
    margin-left: 8px;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .left .d3 li{
    margin-bottom: 5px;
  }
  .left .d3 .span1{
    text-align: left;
    font-size: 14px;
    color: #000;
    margin-left: -95px;

  }
  .left .d3 .span2{
    text-align: left;
    font-size: 14px;
    color: #666666;
    margin-left: 20px;
  }
  .right{
    width: 80%;
    float: right;
    overflow: hidden;
  }
  .right .content{
    width: 70%;
    /*background: gray;*/
    float: left;
  }
  .right .d1{
    text-align: left;
    width: 95%;
    margin: 0 auto;
    padding: 20px 0;
  }
  .right h4{
    /*display: inline;*/
    width: 75px;
    font-size: 18px;
    padding-bottom: 5px;
   border-bottom: solid 1px #000;
    margin-bottom: 20px;
  }
  .right .d1 p{
    font-size: 14px;
    color: #666666;
    line-height: 30px;
  }
  .right .d2 table {
    /* 合并单元格 */
    border-collapse: collapse;
  }

  .right .d2 td {
    border: solid 1px #000;
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: left;
    font-size: 14px;
    color: #666666;
    padding-left: 20px;
  }
  .right .d2{
    text-align: left;
    width: 95%;
    margin: 0 auto;
    padding: 20px 0;
  }
  .right .d3 h4{
    margin-left: 15px;
  }
  .right .d3 img{
    margin: 10px 0;
    width: 95%;
  }
  .right .d4 h4{
    margin-left: 15px;
  }
  .right .d4 table {
    /* 合并单元格 */
    border-collapse: collapse;
    width: 95%;
    margin: 0 auto;
  }

  .right .d4 td {
    border-bottom: solid 1px #ccc;
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: left;
    font-size: 14px;
    color: #666666;
    padding-left: 20px;
  }
  .right .d4 tr:first-child{
    color: #000;
    background: #f2f2f2;
  }
  .right .d4 p{
    font-size: 12px;
    text-align: left;
    margin-left: 15px;
    color:#999999 ;
    margin-top: 15px;
    margin-bottom: 10px;
  }
  .right .d5{
    margin-top: 20px;
  }
  .right .d5 h4{
    width: 110px;
    margin-left: 15px;
  }
  .right .d5 ul{
    overflow: hidden;
  }
  .right .d5 li{
    float: left;
    width: 30%;
    margin: 1%;
  }
  .right .d5 li img{
   width: 100%;
  }
  .right .d5 li img{
    width: 100%;
  }
  .right .r1{
    width: 28%;
    float: right;
    overflow: scroll;
    /*height:110vw;*/
  }
  .right .d5 p{
    text-align: left;
    font-size: 14px;
    color: #000;
    margin-left: 8px;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .right .d5 .span3{
    text-align: left;
    font-size: 14px;
    color: #000;
    margin-left: -95px;

  }
  .right .d5 .span4{
    text-align: left;
    font-size: 14px;
    color: #666666;
    margin-left: 20px;
  }
  .right .r1 li a{
    color:#666666;
    display: block;
    font-size:14px;
    padding:10px 0;
  }
  .right .r1 ul li.active a{
    /*background:red;*/
    /*color:#000;*/
  }
</style>
